<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        input {
            width: 300px;
        }
    </style>
</head>

<body>
    <!-- ##  4、表单的验证（以下是需求）
    - 【1】验证账号
      - 用户名不能为空
      - 不能使用特殊字符（只能使用数字、字母、下划线、横杠）
      - 必须以字母开头
      - 长度6-20
    - 【2】昵称只能输入3-6个中文  /[\u4e00-\u9fa5]{3,6}/ 
    - 【3】电子邮件
      + 163邮箱：
      + 英文开头,@前面的内容可以包含数字字母下划线、-(可以多位)
      + @后面的域名只能是163
      + 域名后缀（.com .cn .net）可以有多个。
      【4】身份证 18位数 后面以为可能是 X x
    - 【5】手机号码
    - 11位 开头必须是 1,第二位必须是 345678 还剩下 8-9位只要是数字就可以了
    - 【6】生日验证
      + 1999/05/08
      + 1999-05-08
      + 19990508
    - 【7】密码  
      + 长度小于20 
      + 不能包含空格 密码不一致能不能提交 -->
    <label for="t1">账号 </label><input type="text" id="t1" placeholder="必须以字母开头,只能使用数字、字母、下划线、横杠,长度6-20"><br>
    <label for="t2">昵称 </label><input type="text" id="t2" placeholder="昵称只能输入3-6个中文"><br>
    <label for="t3">电子邮件</label><input type="text" id="t3"><br>
    <label for="t4">身份证 </label><input type="text" id="t4"><br>
    <label for="t5">手机号码</label><input type="text" id="t5"><br>
    <label for="t6">生日验证</label><input type="text" id="t6"><br>
    <label for="t7">密码 </label><input type="password" id="t7" placeholder="长度小于20,大于6不能包含空格"><br>
    <label for="t8">再次确认</label><input type="password" id="t8" placeholder="长度小于20,大于6不能包含空格"><br>
    <button class="yan">验证</button>



    <script>
        window.onload = () => {
            let yan = document.querySelector(".yan");
            let t = 1
            yan.onclick = () => {
                let reg1 = /^[a-zA-Z][\da-zA-Z_/]{5,19}$/
                if (reg1.test(t1.value)) {
                    // console.log("true")
                } else {
                    alert("用户名错误")
                    t = -1
                }
                let reg2 = /[\u4e00-\u9fa5]{3,6}/;
                if (reg2.test(t2.value)) {
                    // console.log("true")
                } else {
                    alert("昵称错误")
                    t = -1
                }
                let reg3 = /^[0-9a-zA-Z]{6,12}@[0-9a-zA-Z]{2,4}\.(com|cn|sina|net)$/;
                if (reg3.test(t3.value)) {
                    // console.log("true")
                } else {
                    alert("电子邮箱错误")
                    t = -1
                }
                let reg4 = /^\d{17}[\dXx]$/
                if (reg4.test(t4.value)) {
                    // console.log("true")
                } else {
                    alert("身份证错误")
                    t = -1
                }
                let reg5 = /^1[3-8]\d{9}$/;
                if (reg5.test(t5.value)) {
                    // console.log("true")
                } else {
                    alert("手机号码错误")
                    t = -1
                }
                let reg6 = /^\d{4}[/-]?(0\d|1[0-2])[/-]?(0\d|[1-2]\d|3[0,1])$/;
                // let reg6 = /^\d{4}(0\d|1[0-2])(0\d|[1-2]\d|3[0,1])$/;
                if (reg6.test(t6.value)) {
                    // console.log("true")
                } else {
                    alert("生日错误")
                    t = -1
                }
                let reg7 = /^\S{6,20}$/;
                if (reg7.test(t7.value) && t7.value === t8.value) {
                    // console.log("true")
                } else {
                    alert("密码错误")
                    t = -1
                }
                if (t >= 0) {
                    alert("注册成功")
                }

            }
        }
    </script>
</body>

</html>